<template>
  <u-popup v-model="modelValue_s" zIndex="999" mode="bottom" border-radius="14" @close="closeThePopUpBox">
    <view class="w-full !bg-white !rounded-t-[1rem]" @click.stop>
      <view class="flex flex-col gap-4 py-5">
        <view class="flex justify-between items-center px-4">
          <view class="font-bold text-[1.25rem] text-[#171B24]">{{ title }}</view>
          <view class="pl-5" @click="closeThePopUpBox">
            <view class="size-6 bg-[#F4F6F8] flex justify-center items-center rounded-full">
              <u-icon name="close" color="#171B24" size="26"></u-icon>
            </view>
          </view>
        </view>
        <div class="bg-[#F4F6F8] w-full h-[.0625rem]"></div>
        <view class="flex flex-col gap-4 px-4">
          <view class="flex flex-col gap-2">
            <view class="flex justify-between py-3" v-for="(i, k) in data" @click="changePay(i)" :key="k">
              <view class="flex gap-2 items-center">
                <view class="size-6 overflow-hidden rounded-full">
                  <image :src="i.icon" mode="aspectFill" class="size-full" />
                </view>
                <view class="text-[.875rem] text-[#161A24]">{{ i.name }}</view>
              </view>
              <view class="size-5 bg-[#FFFFFF] border rounded-full" v-if="!i.checked"></view>
              <view class="size-5 bg-[#00A9AB] border rounded-full grid place-content-center" v-if="i.checked">
                <u-icon name="checkmark" color="#FFFFFF" class="mt-[.1875rem]" size="23"></u-icon>
              </view>
            </view>
          </view>
        </view>
        <view class="px-4 w-full">
          <button
            :disabled="disabledAndroid"
            :loading="loadingAndroid"
            hover-class="none"
            :class="disabledApple ? '!bg-[#00A9AB]/60' : '!bg-[#00A9AB]'"
            class="after:border-none h-[2.75rem] rounded-full flex items-center justify-center"
            @click="confirmPurchase"
          >
            <view class="text-[1rem] text-[#E5F6F6]" v-if="!loadingAndroid"> 立即支付 {{ price }}元</view>
            <view class="text-[1rem] text-[#E5F6F6]" v-else> 支付中...</view>
          </button>
        </view>

        <!-- <view class="px-4 w-full"> </view> -->
      </view>
    </view>
  </u-popup>
</template>

<script>
  export default {
    data() {
      return {
        modelValue_s: false,
        isAgree: true,
        data: [
          {
            name: '微信',
            icon: '/static/dddr19.png',
            checked: true
          },
          {
            name: '支付宝',
            icon: '/static/dddr28.png',
            checked: false
          }
        ]
      }
    },
    props: {
      modelValue: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: ''
      },

      modelValueData: {
        type: Object,
        default: {}
      },
      price: {
        type: String,
        default: ''
      },
      disabledAndroid: {
        type: Boolean,
        default: false
      },
      loadingAndroid: {
        type: Boolean,
        default: false
      }
    },

    watch: {
      modelValue: {
        immediate: true,
        deep: true,
        handler(newValue, oldValue) {
          if (newValue) {
            // 禁止页面滚动
            this.modelValue_s = true
            // document.body.style.overflow = 'hidden'
          } else {
            // 恢复页面滚动
            this.modelValue_s = false
            // document.body.style.overflow = ''
          }
        }
      }
    },
    methods: {
      confirmPurchase() {
        vk.pubfn.debounce(() => {
          const payMethod = this.data.find(item => item.checked)
          this.$emit('confirm-purchase', payMethod)
        }, 500)
      },
      changePay(i) {
        this.data.forEach(item => {
          item.checked = false
        })
        i.checked = true
      },
      submit() {
        this.$emit('submit')
      },
      reset() {
        this.$emit('reset')
      },

      editConfirmation() {
        this.$emit('edit-confirmation')
      },
      closeThePopUpBox() {
        this.$emit('update:modelValue', false)
      }
    }
    // beforeUnmount() {
    //   // 组件销毁时恢复滚动
    //   document.body.style.overflow = ''
    // }
  }
</script>

<style lang="scss" scoped></style>
